<template>
  <div class="container" v-loading="status_loading">
    <h2 class="title">{{$t('m.areashift.info')}}</h2>
    <el-row>
      <el-form :model="formInline">
        <el-col :span="8" align="left">
          <el-form-item :label="$t('m.areashift.code')" :label-width="formLabelWidth">
            <el-input disabled v-model="formInline.areashiftcode"></el-input>
          </el-form-item>
          <el-form-item v-if="opt=='info'" :label="$t('m.state')" :label-width="formLabelWidth">
            <el-input disabled :value="formInline.state|stateFilter(lan)"></el-input>
          </el-form-item>
          <el-form-item
            v-if="parentName=='history'"
            :label="$t('m.areashift.putawayusername')"
            :label-width="formLabelWidth"
          >
            <el-input disabled v-model="formInline.putawayusername"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" align="left">
          <el-form-item :label="$t('m.creator')" :label-width="formLabelWidth">
            <el-input disabled v-model="formInline.creator" placeholder></el-input>
          </el-form-item>
          <!--  v-if="obj.parentName=='history'" -->
          <el-form-item
            v-if="parentName=='history'"
            :label="$t('m.transposing.modifier')"
            :label-width="formLabelWidth"
          >
            <el-input disabled v-model="formInline.modifier" placeholder></el-input>
          </el-form-item>
          <el-form-item
            v-if="parentName=='history'"
            :label="$t('m.areashift.putawaydate')"
            :label-width="formLabelWidth"
          >
            <el-input disabled v-model="formInline.putawaydate"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" align="left">
          <el-form-item :label="$t('m.createdate')" :label-width="formLabelWidth">
            <el-input disabled v-model="formInline.createdate"></el-input>
          </el-form-item>
          <el-form-item
            v-if="parentName=='history'"
            :label="$t('m.transposing.finish')"
            :label-width="formLabelWidth"
          >
            <el-input disabled v-model="formInline.modifydate" placeholder></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="ellipse"></div>
    <el-row>
      <el-col :span="24">
        <el-table
          ref="table"
          stripe
          empty-text
          fits
          class="single-select-table"
          :data="tableData"
          :row-style="tableRowStyle"
          :row-class-name="tableRowClassName"
          @row-click="rowClick"
          @selection-change="handleSingleSelectionChange"
        >
          <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
          <el-table-column v-if="obj.parentName==='areashift'&&obj.opt=='info'" align="center" prop="areashiftdetailcode" label="Shift Area Task Code"></el-table-column>
          <el-table-column v-if="obj.parentName==='areashift'&&obj.opt=='info'" align="center" prop="detailstate" label="Status">
            <template slot-scope="scope">{{scope.row.detailstate|detailstateFilter(lan)}}</template>
          </el-table-column>
          <el-table-column align="center" prop="sourcelocationcode" label="TakeOff Location"></el-table-column>
          <el-table-column align="center" prop="productspeccode" label="SKU"></el-table-column>
          <el-table-column
            label="ProductName"
            align="center"
            prop="productname"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            prop="productspec"
            label="Specification"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="BatchNum" align="center" prop="batchnum"></el-table-column>
          <el-table-column align="center" prop="quantity" label="Shift Qty"></el-table-column>
          <el-table-column align="center" prop="targetlocationcode" label="PutAway Location"></el-table-column>
        </el-table>
        <div v-if="opt=='check'">
          <el-divider></el-divider>
          <el-form align="left" :rules="checkFormRule" ref="checkForm" :model="checkForm">
            <el-form-item :label="$t('m.in.result')" :label-width="formLabelWidth" prop="state">
              <template>
                <el-radio v-model="checkForm.state" label="3">
                  <span style="font-size:10px;">{{$t('m.in.pass')}}</span>
                </el-radio>
                <el-radio v-model="checkForm.state" label="2">
                  <span style="font-size:10px;">{{$t('m.in.state2')}}</span>
                </el-radio>
              </template>
            </el-form-item>
            <el-form-item
              v-if="checkForm.state==2"
              :label="$t('m.notice.opinion')"
              :label-width="formLabelWidth"
              prop="auditopinion"
            >
              <el-input
                type="textarea"
                maxlength="100"
                show-word-limit
                v-model="checkForm.auditopinion"
              ></el-input>
            </el-form-item>
            <el-form-item v-else :label="$t('m.notice.opinion')" :label-width="formLabelWidth">
              <el-input
                type="textarea"
                maxlength="100"
                show-word-limit
                v-model="checkForm.auditopinion"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="btns">
          <el-button @click="back">{{$t('m.back')}}</el-button>
          <el-button v-if="opt=='check'" type="primary" @click="check()">{{$t('m.confirm')}}</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import common from '@/utils/common'
export default {
  data(){
    return {
      status_loading:false,
      formInline:{},
      tableData:[],
      dialogFormVisible:false,
      formLabelWidth:'140px',
      id:null, //移位单id
      opt:'',
      parentName:'',
      checkForm:{
        auditopinion:'',
        state:null
      }
    }
  },
  components:{},
  watch:{},
  props:['obj'],
  filters:{
    stateFilter(value, lan){
      return [
        lan('m.quality.state1'),
        lan('m.areashift.state2'),
        lan('m.areashift.state3'),
        lan('m.areashift.state4'),
        lan('m.shelves.state1'),
        lan('m.shelves.state4'),
        '',
        '',
        '',
        lan('m.shelves.state5')
      ][value - 1]
    },
    // (1待处理 2 待下架3待上架4已完成)
    detailstateFilter(value, lan){
      return [
        lan('m.quality.state1'),
        lan('m.areashift.state3'),
        lan('m.shelves.state1'),
        lan('m.shelves.state5')
      ][value - 1]
    }
  },
  computed:{
    checkFormRule(){
      this.$nextTick(() => {
        this.$refs.checkForm.clearValidate()
      })
      return {
        state:[
          {
            required:true,
            message:this.$t('m.choose') + this.$t('m.in.result'),
            trigger:'blur'
          }
        ],
        auditopinion:[
          {
            required:true,
            message:this.$t('m.enter') + this.$t('m.notice.opinion'),
            trigger:'blur'
          }
        ]
      }
    }
  },
  methods:{
    lan(arg){
      return this.$t(arg)
    },
    getInfo(){
      this.$axios({
        method:'get',
        url:`/areashift/${this.id}`
      }).then(({data})=> {
        this.tableData = data.detailList
        this.formInline = data
        this.formInline.createdate = common.timestampToTime(
          data.createdate
        )
        this.formInline.modifydate = common.timestampToTime(
          data.modifydate
        )
        this.formInline.putawaydate = common.timestampToTime(
          data.putawaydate
        )
        this.status_loading = false
      })
    },

    back(){
      //移库和移库历史共用一个详情页面，所以要判断返回哪个页面
      if (this.obj.parentName == 'history'){
        let obj = {
          componentName:'history'
        }
        this.$emit('switchComponent', obj)
      } else {
        let obj = {
          componentName:'areashift'
        }
        this.$emit('switchComponent', obj)
      }
    },
    check(){
      this.$refs['checkForm'].validate(valid => {
        if (valid){
          if (!this.checkForm.auditopinion && this.checkForm.state == 2){
            this.$message({
              showClose:true,
              message:this.$t('m.enter') + this.$t('m.notice.opinion'),
              type:'error',
              duration:1000
            })
          } else {
            this.$axios({
              method:'post',
              url:`/areashift/check/${this.id}`,
              data:this.checkForm
            }).then(({data})=> {
              this.$message({
                showClose:true,
                message:this.$t('m.quality.success'),
                type:'success',
                duration:1000
              })
              this.back()
            })
          }
        }
      })
    }
  },
  activated(){
    this.status_loading = true
    this.id = this.obj.id
    this.opt = this.obj.opt
    this.parentName = this.obj.parentName
    if (this.id){
      this.getInfo()
    }
  }
}
</script>
<style lang="scss" scoped>
.el-select {
  width: 100%;
}
.title {
  margin-bottom: 30px;
}
::v-deep.el-textarea .el-input__count {
  bottom: 5px;
}
</style>